<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>拼团</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body>
    <header class="header groupBuyHeader">
        <div class="headerPageLeft">
            <i class="gpsIcon"></i>
            <span></span>
            <i class="icon"></i>
        </div>
        <div class="pageTitle">拼团</div>
    </header>
    <section class="groupBuyPage HTML_BOX">
       <ul class="groupBuyType">
           
        </ul>

        <ul class="wareSelectBox">
            <li class="selectli on count" data-sort="1" data-type="1"><span>销量</span><i></i></li>
            <li class="selectli price" data-sort="2" data-type="2"><span>价格</span><i></i></li>
            <li class="selectli time" data-sort="3" data-type="2"><span>上传时间</span><i></i></li>
            <li class="select"><span>筛选</span><i></i></li>
        </ul>
        <ul class="groupWareList">
           
           
        </ul>
        
        <div class="pageHide dn">暂无数据..</div>
    </section>
     <!-- 底部导航 -->
    <section class="sectionH"></section>
    <section class="navigation">
        <ul>
            <li onclick="openWin('index','index.html')">
                <span  class="icon"></span>
                <p id="nav1">首页</p>
            </li>
            <li onclick="openWin('classify','classify.html')">
                <span class="icon"></span>
                <p id="nav2">分类</p>
            </li>
            <li class="on" >
                <span class="icon"></span>
                <p id="nav3">拼团</p>
            </li>
            <li onclick="shoppingCart()">
                <span class="icon"></span>
                <p id="nav4">购物车</p>
            </li>
            <li  onclick="member()">
                <span class="icon"></span>
                <p id="nav5">我的</p>
            </li>
        </ul>
    </section>
    <div class="mask_pop ">
        <div class="mask"></div>
        <div class="select_pop">
            <div id="seachItemBox">
                <p class="pop_title">筛选</p>
                <div id="classifyBox" class="select_pop_box">
                    <!-- <div class="boxTitle">分类</div>
                    <ul id="classify" class="pop_classify">
                        
                    </ul> -->
                </div>
                <div class="select_pop_box">
                    <div class="boxTitle">价格区间</div>
                    <div class="pop_price">
                       <input placeholder="最低价" />
                       <span></span>
                        <input placeholder="最高价" />
                    </div>
                </div>
                <div class="select_pop_box">
                    <!-- <div class="boxTitle">产地</div>
                    <ul id="zone" class="pop_classify">
                        
                    </ul> -->
                </div>
            </div>
            <div style="border-top:1.44rem solid #fff;"></div>
            <div class="select_pop_btns">
                <div class="btn remake">重置</div>
                <div class="btn submit">确定</div>
            </div>
        </div>
    </div>
    <div class="xiala_popmask"></div>

    <div style="left: 0.14rem;" class="xiala_pop">
         <div class="xiala_Box">
             <div class="xiala_sj" style="left: 0.52rem;"></div>
             <ul>
                 <li style="justify-content: center;" onclick="changlang(14)">大温地区</li>
                 <li style="justify-content: center;" onclick="changlang(54)">其他地区</li>
             </ul>
         </div>   
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var page = 1;//页数
    var type1 = 0;//预备type3
    var rez ="";
    var pageParam;
    var sort=1;
    var sort_type=1;
    var keys = "";
    var jgmin ="";
    var jgmax ="";
    var zone ="";
    var isload = true;
    var ifware = true;
    var ifpage = true;
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        $api.fixStatusBar($api.dom('.xiala_pop'));
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                 threshold: 10
            }
         }, function(ret, err) {
             //页码+1，继续请求数据
             
             if(ifpage){
                page++;
                wareList();
             }
             
        });
        var sysType = api.systemType;
        if(sysType == 'ios'){
            $(".select_pop").css("padding-top","20px");
        }else if(sysType == 'android'){
            $(".select_pop").css("padding-top","24px");
        }
        
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        if(cnen==2){
            lang.title = lang.egtitle;
        }
        $(".headerPageLeft span").html(lang.title);
        ExitApp();
        ifCnAndEn();
        ready();
    };
    function ready(){
        getAjax(Interface.category_first,{},function(res){
             $.each(res.data,function(i,item){
                var html ='';
                    if(item.id == 86 || item.id == 81){return true;}
                    if(i==0){
                        type1 = item.id;
                        html ='<li class="f_c on" onclick="chooseType1(this,'+item.id+')"><span>'+item.title+'</span><div class="pageOn"></div></li>';
                    }else{
                        html ='<li class="f_c" onclick="chooseType1(this,'+item.id+')"><span>'+item.title+'</span><div class="pageOn"></div></li>';
                    }
                $(".groupBuyType").append(html);
             })
             wareList();
        })
    }

    var ifxiala =true;
    $(".headerPageLeft").click(function(){
        if(ifxiala){
            ifxiala=false;
           $(".xiala_pop").fadeIn(300); 
           $(".xiala_popmask").addClass("on");
       }else{
            ifxiala=true;
            $(".xiala_pop").fadeOut(300);
            $(".xiala_popmask").removeClass("on");
       }
    });
    $(".xiala_popmask").click(function(){
        ifxiala=true;
        $(".xiala_pop").fadeOut(300);
        $(".xiala_popmask").removeClass("on");
    });
    $(window).scroll(function(e) {
        var startY = $(window).scrollTop();
        console.log(startY);
        ifxiala=true;
        $(".xiala_pop").fadeOut(300);
        $(".xiala_popmask").removeClass("on");
    });

    function changlang(id){
        var title;
        var egtitle;
        if(id==14){
            title="大温地区";
            egtitle="Greater Vancouver";
        }else{
            title="其他地区";
            egtitle="Other";
        }
        var lang_type = {id:id,title:title,egtitle:egtitle}
        win.setStorage('lang_type',lang_type);
        window.location.reload();
        console.log(lang);
    }


    function wareList(){
        var params = {
            page:page,//页数   
            type1:type1,
            limit:24
        }
        if(sort==1){
            params.xl=1;
        }else if(sort==2){
            params.price=sort_type;
        }else if(sort==3){
            params.time=sort_type;
        }
        pop.loading();
        getAjax(Interface.spell_list,params,function(res){
            console.log(JSON.stringify(res));
            pop.close();
           
            var list = res.data;
            if(page==1){
                $(".groupWareList").empty();
            }
            if(list!="" && list !=null && list !=false){
                $(".pageHide").addClass("dn");ifpage=true;
                
                $.each(list,function(i,item){
                    var name = '';
                    if(cnen==1){
                        name = item.title;
                    }else{
                        name = item.egname;
                    }
                    var html ='';
                        
                    html+='<li onclick="goWare(\''+item.id+'\')">';
                        html+='<div class="wareImgBox">';
                            html+='<img src="'+getImg(item.icon)+'" />';
                        html+='</div>';
                        html+='<div class="wareName">'+name+'</div>';
                        html+='<div class="groupPrice displayFlex">';
                            html+='<div class="warePrice">';
                            if(item.old_price == ""){
                                html+='<span>$'+item.new_price+'</span>';
                            }else{
                                html+='<span>$'+item.new_price+'</span>';
                                html+='<del>'+item.old_price+'</del>';
                            }
                            html+='</div>';
                            if(cnen==1){
                                html+='<div class="groupCount f_c">'+item.member_num+'人成团</div>';
                            }else{
                                html+='<div class="groupCount f_c">Group of '+item.member_num+' </div>';
                            }
                            
                        html+='</div>';
                   html+='</li>';
                    $(".groupWareList").append(html);
                })
                if(list.length<10){
                    $(".getPage").hide();
                }
            }else{
                ifpage=false;
                 if(page==1){$(".pageHide").removeClass("dn");}
            }
        },function(res,err){})
    }
    function chooseType1(dom,id){
        $(".groupBuyType li").removeClass("on");
        $(dom).addClass("on");
        type1 = id;
        page =1;
        wareList();
    }
    $(".pop_classify li").click(function(){
        $(this).parent().find("li").removeClass("on");
        $(this).addClass("on");
    })
    $(".select").click(function(){
        maskOpen();  
        $(".select_pop").animate({right:'0rem'},350);//展开动画
    })
    $(".mask").click(function(){
        //收回动画
        $(".select_pop").animate({right:'-6.05rem'},350,function(){
            maskClose();
        });
    })
    $(".remake").click(function(){
        //收回动画
        $(".select_pop").animate({right:'-6.05rem'},350,function(){
            maskClose();
        });
    })
    //筛算按钮
    $(".wareSelectBox .selectli").click(function(){
        //type 1为销量 只有从上到下
        //2为上下两边 故清楚dwon和 top
        //top从下到上 down 从上到下
        var type = $(this).data("type");
        sort = $(this).data("sort");
        console.log(type);
        if(type==2){
            //如果不为销量，默认从上到下
            var ison = $(this).hasClass("on");
            console.log(ison);
            if(ison){
                var istop = $(this).hasClass("top");
                if(istop){
                    sort_type=1;
                    $(this).removeClass("top");
                    $(this).addClass("down");
                }else{
                    sort_type=2;
                    $(this).addClass("top");
                     $(this).removeClass("down");
                }
            }else{
                $(".wareSelectBox .selectli").removeClass("on");
                $(".wareSelectBox .selectli").removeClass("down");
                $(".wareSelectBox .selectli").removeClass("top");
                $(this).addClass("down");
            }
            $(this).addClass("on");
        }else{
            $(".wareSelectBox .selectli").removeClass("on");
            $(".wareSelectBox .selectli").removeClass("down");
            $(".wareSelectBox .selectli").removeClass("top");
            $(this).addClass("on");
        }
        page=1;
        wareList();
    });
    $(".submit").click(function(){
        //收回动画
        pageParam.type3 = ret3;
        page = 1;
        zone = rez;
        jgmin= $(".pop_price input").eq(0).val();
        jgmax= $(".pop_price input").eq(1).val();
        warelist();
        $(".select_pop").animate({right:'-6.05rem'},350,function(){
            maskClose();
        });
    })
    $(".getPage").click(function(){
        page++;
        wareList();
    })
    //选择fenlei
    function pop_classify (e,id){
        $(e).parent().find("li").removeClass("on");
        $(e).addClass("on");
        ret3 = id;
    }
    //选择fenlei
    function pop_zone (e,id){
        $(e).parent().find("li").removeClass("on");
        $(e).addClass("on");
        rez = id;
    }
</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
            $(".pageTitle").html('Group Deals');
           $(".wareSelectBox li").eq(0).find("span").html('Sales');
           $(".wareSelectBox li").eq(1).find("span").html('Price');
           $(".wareSelectBox li").eq(2).find("span").html('Arrivals');
           $(".wareSelectBox li").eq(3).find("span").html('Filter');
           $(".boxTitle").eq(0).html('Categories');
           $(".boxTitle").eq(1).html('Price range');
           $(".boxTitle").eq(2).html('Origin');
           $(".pop_title").html('Filter');
           $(".getPage").html('Click to load more...');
            $(".pageHide").html('Not data');
           $(".pop_price input").eq(0).attr('placeholder',"Min Price");
           $(".pop_price input").eq(1).attr('placeholder',"Max Price");
           $(".remake").html('Reset');
           $(".submit").html('Filter');
           $("#nav1").html('Home');
            $("#nav2").html('Departments');
            $("#nav3").html('Deals');
            $("#nav4").html('Cart');
            $("#nav5").html('Account');
            $(".xiala_Box ul li").eq(0).html("Greater Vancouver");
            $(".xiala_Box ul li").eq(1).html("Other");
            $(".xiala_pop").css("width","3rem");
        }
    }
</script>
</html>